<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div id="app">
		<input-com :username='username' @child-input="changeEvent"></input-com>
		<input-com :username='username' @child-input="username=$event"></input-com>
		<h3>{{username}}</h3>
	</div>

	<script type="text/javascript">
		Vue.component('input-com', {
			props: ['username'],
			template: `<input type="text" @input="$emit('child-input',$event.target.value)" :value="username" />`,

		});

		var app = new Vue({
			el: "#app",
			data: {
				username: ""
			},
			methods:{
				changeEvent:function(data){
					this.username = data;
				}
			}
		})
	</script>
</body>

</html>